<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      title="选择活动"
      width="850px"
      @close="close"
    >
      <div v-loading="loading">

        <!-- filter start -->
        <div class="filter-container">
          <el-form ref="filterForm" :model="filterForm" inline label-width="100px" size="small">
            <el-form-item prop="title" label="活动名称：">
              <el-input
                v-model="filterForm.theme"
                placeholder="请输入活动名称"
                size="small"
                @keyup.enter.native="fetchData"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" round @click="search">查 询</el-button>
              <el-button round @click="reset">重 置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- filter end -->

        <div class="table-container">
          <!-- 表格内容 -->
          <el-table

            :data="list"
            border
            stripe
            style="width: 100%"
            size="small"
            element-loading-text="加载中"
            empty-text="暂无数据"
          >
            <el-table-column prop="theme" label="活动主题" fixed />
            <el-table-column label="活动时间" width="150">
              <template slot-scope="scope">
                <div>开始时间：{{ scope.row.startTime }}</div>
                <div>结束时间：{{ scope.row.endTime }}</div>
              </template>
            </el-table-column>
            <el-table-column label="活动状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status===1" size="mini" type="success">启用中</el-tag>
                <el-tag v-if="scope.row.status===2" size="mini" type="danger">已暂停</el-tag>
                <el-tag v-if="scope.row.status===3" size="mini" type="info">已终止</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="活动类型">
              <template slot-scope="scope">
                <div> {{ scope.row.onlyMemberDay ? '会员日' : '' }}{{ $store.state.setting.marketingActivityTypeKeyOptions[scope.row.activityType]||'-' }}</div>
              </template>
            </el-table-column>
            <el-table-column label="选择" width="100">
              <template slot-scope="scope">
                <el-checkbox
                  v-model="checkedIds"
                  :disabled="originalCheckedIds.includes(scope.row.id)||scope.row.status!==1"
                  :label="scope.row.id"
                  @change="(val)=>checkboxChange(val,scope.row)"
                >
                  {{ checkedIds.includes(scope.row.id) ? '已选' : '选择' }}
                </el-checkbox>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination-direction
            v-if="paginationConfig.total!==0"
            :config="paginationConfig"
            @sizeschange="sizesChange"
            @pagechange="pageChange"
          />
        </div>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="loading||checkedList.length===0" size="small" round type="primary" @click="submit">
          确定<span>（ 已选 {{ checkedList.length }}  ）</span></el-button>
        <el-button :disabled="loading" size="small" round @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getActivityList } from '@/api/marketing'

export default {
  data() {
    return {
      // 配置
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      resolve: null,
      reject: null,
      statusOptions: {
        0: '已下架',
        1: '已上架'
      },
      categoryTreeOptions: [],

      // 状态
      dialogVisible: null,
      loading: false,
      // 数据
      filterForm: {
        theme: '',
        timeState: '1'
      },
      originalCheckedIds: [],
      checkedIds: [],
      checkedList: [],
      list: []
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },

  methods: {
    /**
     * 弹框相关
     */
    open({ hasCheckedIds = [] }) {
      this.originalCheckedIds = hasCheckedIds
      this.checkedIds = hasCheckedIds
      this.fetchData()
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.loading = false
      this.originalCheckedIds = []
      this.checkedIds = []
      this.checkedList = []
      this.list = []
      this.form = {
        goodsId: null
      }
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    /**
     * 数据组
     */
    // 获取列表
    fetchData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入page
      this.filterForm.page = page
      this.filterForm.pageSize = pageSize
      const params = Object.assign({}, this.filterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      this.loading = true
      getActivityList(params)
        .then(res => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },

    // 分页page改变
    pageChange() {
      this.fetchData()
    },

    /**
     * 按钮组
     */
    // 查询
    search() {
      this.fetchData(1)
    },

    // 重置
    reset() {
      this.$refs.filterForm.resetFields()
    },

    // 保存
    submit() {
      if (this.checkedList.length) this.resolve && this.resolve(this.checkedList)
      this.hide()
    },

    // 取消
    cancel() {
      this.hide()
    },

    // 选择
    // chooseGoods(row) {
    //   const params = {
    //     goodsId: row.goodsId,
    //     coverImg: row.coverImg,
    //     title: row.title,
    //     subTitles: row.subTitle,
    //     category: row.categoryName
    //   }
    //   this.resolve && this.resolve(params)
    //   this.hide()
    // },

    /*
    * 状态组
    * */
    // 多选
    checkboxChange(val, row) {
      if (val) {
        const { id, image, activityType, onlyMemberDay, startTime, activityCode, endTime, theme } = row
        const params = { id, image, activityType, onlyMemberDay, startTime, activityCode, endTime, theme }
        this.checkedList.push(params)
      } else {
        this.checkedList.splice(this.checkedList.findIndex(item => item.id === row.id), 1)
      }
    }
    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
